<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 直接这么写 不是下载 跳转!!  -->
  <!-- <a href="https://cdn-getuigw.getui.com/getuipush.pdf">下载吧</a> -->
  <!-- 这样写可以下载 -->
  <!-- <a  download="aaa.pdf" href="http://localhost:4000/file">下载吧</a> -->
  <!-- 
    1 前端要获取到 后台生成文件  OK 
    2 让前端浏览器 触发下载行为 利用a标签自身的能力来实现 
      1 创建一个新的a标签 
      2 设置a标签的关键属性
        1 href属性 等于  要下载文件资源 
        2 设置download属性 下载 
      3 模拟a标签的点击行为 
   -->
  <button>下载</button>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    const button = document.querySelector("button")
    button.addEventListener('click', async function (e) {
      // 1 使用axios 后台发起 请求  文件资源 
      const result = await axios({
        url: "http://192.168.110.72:4000/file",
        // 请求文件 设置期望后端返回数据 类型 设置
        responseType: "blob" // blob b => binary  数据流  l => large 大  ob => object     blob  js  大文件
      })
      console.log(result); // 前端 获取到了  服务器 提供 文件资源!! 
      // 2 前端模拟a标签
      const a = document.createElement("a");
      const url = URL.createObjectURL(result.data)// 传入二进制流,返回 可以访问到 字符串类型的url 
      a.href = url      
      a.download="abc.txt"
      a.click()
    })
  </script>
</body>
</html>